<body>
    <div class="layui-btn-group">
        <button class="layui-btn" id="mediaTableAdd">添加</button>
        <button class="layui-btn" id="mediaTablereload">刷新</button>
    </div>
    <table class="layui-hide" id="mediaTables" lay-filter="mediaTables"></table>
    <div style="display: none" id="mediabarDemo" type="text/html">
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </div>

    <script>
        layui.use(['jquery', 'layer', 'table', 'form', 'config'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var config = layui.config;

            // 表格渲染
            table.render({
                elem: '#mediaTables',
                id: 'mediaRender'
                , url: config.base_server + 'getmediaList'
                , cellMinWidth: 80
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'mediaId', title: '媒体编号', sort: true, minWidth: 100 }
                    , { field: 'mediaAuthor', title: '媒体名称', minWidth: 100 }
                    , {
                        field: 'mediaAvatar', title: '媒体图片', minWidth: 100,
                        templet: function (d) {
                            if (d.mediaAvatar) {
                                return '<div ><img src=' + d.mediaAvatar + ' style="width: 50px;" alt=""></div>'
                            } else {
                                return '<div ><img  src="" style="width: 50px;height:50px" alt=""></div>'
                            }
                        }
                    }
                    , { title: '操作', toolbar: '#mediabarDemo' }

                ]]
                , page: true //开启分页
                , skin: 'row' //行边框风格
                , even: true //开启隔行背景
                , size: 'lg' //小尺寸的表格
            });

            table.on('tool(mediaTables)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    var editId = data.mediaId;
                    layer.confirm('真的删除该媒体信息?', function (index) {
                        $.ajax({
                            type: "POST",
                            url: config.base_server + "deleteMediaById",
                            data: { mediaId: editId },
                            dataType: "json",
                            success: (data) => {
                                if (data.code) {
                                    obj.del();
                                    // table.reload('user');
                                    layer.msg('删除成功', {
                                        icon: 1
                                    });
                                    layer.close(index);
                                } else {
                                    alert(data.info);
                                }
                            }
                        });
                    });

                } else if (obj.event === 'edit') {
                    var editId = data.mediaId;
                    var fu = layer.open({
                        type: 2,
                        title: "编辑" + editId + "号媒体信息",
                        area: ['600px', '450px'],
                        content: 'components/system/mediaEditTable.html?editNo=' + editId,
                        maxmin: true,
                        end: function () {
                            table.reload('mediaRender');
                        }
                    });

                }
            });

            $('#mediaTableAdd').on('click', function () {
                var fu = layer.open({
                    type: 2,
                    title: '添加',
                    content: 'components/system/mediaAddTable.html',
                    area: ['500px', '400px'],
                    end: function () {
                        table.reload('mediaRender');
                    }
                });
            });

            $('#mediaTableReset').on('click', function () {
                location.reload();
            });
        });
    </script>
</body>